<template>
  <div v-loading="loading" style="width: 1300px;height: 550px;" class="list-table">
    <force v-if="!loading" ref="force" :root-id="rootId" :charts-data="echartsData" />
  </div>
</template>

<script>
import force from '@/views/chart/force.vue'
import { getProjectPenetration } from '@/api/bf/investmentPenetration/investmentPenetration'
export default {
  components: {
    force
  },
  props: {
    busData: {
      type: Object,
      default: function() {
        return {
          busId: undefined,
          busType: undefined,
          busName: undefined
        }
      },
      required: true
    }
  },
  data() {
    return {
      loading: false,
      echartsData: undefined,
      rootId: undefined
    }
  },
  watch: {
    busData: {
      handler(val) {
        if (val !== undefined) {
          this.businessId = val.busId
          this.businessType = val.busType
          this.businessName = val.busName
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.loading = true
      getProjectPenetration({ businessType: this.businessType, businessId: this.businessId, businessName: this.businessName }).then(response => {
        if (this.echartsData !== null) {
          this.rootId = response.data.nodes[0].id
          this.echartsData = response.data
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
